<!--
 * @Author: Mr · Lei
 * @Date: 2024-10-18 15:26:17
 * @LastEditors: OBKoro1
 * @LastEditTime: 2024-10-18 15:26:18
 * @FilePath: \ruituan-tuan-web\src\views\nfc\nfc-config\components\addIncome.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by 四川开局红科技有限公司, All Rights Reserved. 
-->
<template>
  <div>
    <a-modal
      :visible="props.modalObj.isVisible"
      width="50vw"
      unmount-on-close
      :footer="false"
      @open="openModal"
      @cancel="handleCancel"
    >
      <template #title>
        {{ $t('nfcOrderList.modal.title.add') }}
      </template>
      <a-form ref="formRef" layout="vertical" :model="IncomeFormData">
        <a-row :gutter="20">
          <a-col :span="8">
            <a-form-item
              field="probability"
              :label="$t('nfcOrderList.modal.probability')"
            >
              <a-input
                v-model="IncomeFormData.probability"
                :placeholder="$t('nfcOrderList.modal.probability.placeholder')"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="min" :label="$t('nfcOrderList.modal.min')">
              <a-input
                v-model="IncomeFormData.min"
                :placeholder="$t('nfcOrderList.modal.min.placeholder')"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item field="max" :label="$t('nfcOrderList.modal.max')">
              <a-input
                v-model="IncomeFormData.max"
                :placeholder="$t('nfcOrderList.modal.max.placeholder')"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col>
            <div style="margin-top: 20px"></div>

            {{ $t('nfcOrderList.modal.tabel.title') }}
            <a-divider style="margin-top: 5px" />
            <a-row>
              <a-col :span="9">
                <a-form-item :label="t('nfcOrderList.modal.shop.name')">
                  <a-input
                    v-model="formModel.name"
                    :placeholder="t('nfcOrderList.modal.shop.name')"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="2"> </a-col>
              <a-col :span="9">
                <a-form-item :label="t('nfcOrderList.modal.shop.address')">
                  <a-input
                    v-model="formModel.address"
                    :placeholder="t('nfcOrderList.modal.shop.address')"
                  />
                </a-form-item>
              </a-col>
              <a-divider style="height: 84px" direction="vertical" />
              <a-col
                style="text-align: right; justify-content: flex-end"
                :span="3"
              >
                <a-space direction="vertical" :size="18" style="">
                  <a-button type="primary" size="small" @click="search">
                    <template #icon>
                      <icon-search />
                    </template>
                    {{ $t('nfcOrderList.form.search') }}
                  </a-button>
                  <a-button size="small" @click="reset">
                    <template #icon>
                      <icon-refresh />
                    </template>
                    {{ $t('nfcOrderList.form.reset') }}
                  </a-button>
                </a-space>
              </a-col>
            </a-row>
            <a-divider style="margin-top: 10px" />

            <a-table
              row-key="id"
              show-empty-tree
              :row-selection="{ type: 'radio' }"
              :loading="loading"
              :pagination="pagination"
              :columns="(columns as TableColumnData[])"
              :data="renderData"
              :bordered="{ wrapper: true, cell: true }"
              @page-change="onPageChange"
              @select="onSelectChange"
            >
              <template #name="{ record }">
                <span :style="{ color: record.name ? '' : '#999999' }">{{
                  record.name || $t('nfcOrderList.modal.shop.name1')
                }}</span>
              </template>
              <template #address="{ record }">
                <span :style="{ color: record.address ? '' : '#999999' }">{{
                  record.address || $t('nfcOrderList.modal.shop.address1')
                }}</span>
              </template>
            </a-table>
          </a-col>
          <a-col :span="1"> </a-col>
        </a-row>
        <a-form-item>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              margin-top: 20px;
            "
          >
            <a-button type="outline" size="large" @click="handleCancel">
              {{ $t('nfcOrderList.modal.cancel') }}
            </a-button>
            <div style="width: 20px"></div>
            <a-button
              type="primary"
              size="large"
              html-type="submit"
              @click="handlePasswordOk"
            >
              {{ $t('nfcOrderList.modal.confirm') }}
            </a-button>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineProps, defineEmits, reactive, computed } from 'vue';
  import { GetShopListApi, PolicyParams } from '@/api/shop';
  import { Pagination } from '@/types/global';
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import useLoading from '@/hooks/loading';
  import { AddIncomeConfigApi, EditIncomeConfigApi } from '@/api/nfc';
  import { Message } from '@arco-design/web-vue';
  import { useI18n } from 'vue-i18n';

  const { t } = useI18n();
  const { loading, setLoading } = useLoading(true);
  const props = defineProps({
    modalObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  // 表单数据
  const IncomeFormData = ref<any>({
    id: 0,
    min: '',
    max: '',
    shop_id: 0,
    probability: '',
  });
  const emits = defineEmits(['handleCancel']);

  const handlePasswordOk = async () => {
    setLoading(true);
    try {
      if (IncomeFormData.value.probability === '') {
        Message.error(t('nfcOrderList.modal.probability.placeholder'));
        return;
      }
      if (IncomeFormData.value.min === '') {
        Message.error(t('nfcOrderList.modal.min.placeholder'));
        return;
      }
      if (IncomeFormData.value.max === '') {
        Message.error(t('nfcOrderList.modal.max.placeholder'));
        return;
      }
      if (IncomeFormData.value.shop_id === 0) {
        Message.error(t('nfcOrderList.modal.shopid.empty'));
        return;
      }
      if (props.modalObj.type === 0) {
        await AddIncomeConfigApi(IncomeFormData.value);
        Message.success(t('Message.addSuccess'));
      } else {
        await EditIncomeConfigApi(IncomeFormData.value);
        Message.success(t('Message.editSuccess'));
      }
      emits('handleCancel');
    } catch (err) {
      console.log('err::: ', err);
    } finally {
      setLoading(false);
    }
  };
  // 查询门店
  // 获取门店 列表
  const renderData = ref([]);
  // 分页属性
  const basePagination: Pagination = {
    page: 1,
    limit: 5,
  };
  const pagination = reactive({
    ...basePagination,
    defaultPageSize: 5,
    current: 1,
  });
  const generateFormModel = () => {
    return {
      name: '',
      address: '',
      id: 0,
    };
  };
  const generateFormModelOp = () => {
    return {
      name: 'like',
      address: 'like',
      id: '=',
    };
  };

  const formModel = ref(generateFormModel());
  const formModelOp = ref(generateFormModelOp());

  const columns = computed<TableColumnData[]>(() => [
    {
      title: t('nfcOrderList.modal.shop.name'),
      dataIndex: 'name',
      align: 'center',
      slotName: 'name',
    },
    {
      title: t('nfcOrderList.modal.shop.address'),
      dataIndex: 'address',
      align: 'center',
      slotName: 'address',

      width: 300,
    },
  ]);
  // 查询门店
  const feachdata = async (params: PolicyParams = { page: 1, limit: 5 }) => {
    console.log('params::: ', params);
    setLoading(true);
    try {
      const { data } = await GetShopListApi(params);
      renderData.value = data.data;
      pagination.page = params.page;
      pagination.total = data.total;
    } catch (err) {
      console.log(err);
      // you can report use errorHandler or other
    } finally {
      setLoading(false);
    }
  };

  const search = () => {
    feachdata({
      ...basePagination,
      filter: JSON.stringify(formModel.value),
      op: JSON.stringify(formModelOp.value),
    } as unknown as PolicyParams);
  };
  const onPageChange = (page: number) => {
    pagination.current = page;
    feachdata({
      ...basePagination,
      page,
      filter: JSON.stringify(formModel.value),
      op: JSON.stringify(formModelOp.value),
    } as unknown as PolicyParams);
  };

  const reset = () => {
    formModel.value = generateFormModel();
    basePagination.page = 1;
    search();
  };
  // 选择门店后触发
  const onSelectChange = (keys: (string | number)[]) => {
    const id = keys[0];
    IncomeFormData.value.shop_id = id;
  };

  // 弹窗打开触发
  const openModal = () => {
    console.log('porps::: ', props);
    IncomeFormData.value.id =
      props.modalObj.type === 0 ? 0 : props.modalObj.obj.id;
    IncomeFormData.value.shop_id = props.modalObj.obj.shop_id;
    IncomeFormData.value.min = props.modalObj.obj.min;
    IncomeFormData.value.max = props.modalObj.obj.max;
    IncomeFormData.value.probability = props.modalObj.obj.probability;
    formModel.value.id = props.modalObj.obj.shop_id;

    search();
  };

  // 弹窗关闭触发
  const handleCancel = () => {
    formModel.value = generateFormModel();
    emits('handleCancel');
  };
</script>

<style scoped></style>
